<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="icon" type="image/png" href="../img/icon.png">
    <link rel="stylesheet" href="../css/toastr.min.css">
    <link rel="stylesheet" href="../css/all.css">
    <style>
        .menu-bar {
            list-style: none;
            padding-left: 0;
        }
        .menu-bar>li {
            display: inline-block;
            border: 1px solid #ccc;
            padding: 5px 10px;
            margin: 0 10px 10px 0;
        }
        .menu-bar a {
            text-decoration: none;
        }
    </style>
</head>
<body>

<div id="app" >

    <div>
        <span class="title3" >{{loginUser.name}}</span>
        <a href="javascript:;" @click=" doLogout ">退出</a>
    </div>
    <hr>

    <ul class="menu-bar" >
        <li v-for="(menu, index) in menuArr" >
            <a :href=" baseUrl + menu.url " target="_blank">{{menu.name}}</a>
        </li>
    </ul>

</div>

<script src="../js/vue.min.js" ></script>
<script src="../js/jquery-3.3.1.min.js" ></script>
<script src="../js/toastr.min.js" ></script>
<script src="../js/base.js" ></script>
<script>
    Vue.config.devtools = true; // 描述浏览器调试工具是否可用
    new Vue({
        el: "#app",
        data: {
            baseUrl: baseUrl,
            menuArr: [
                {id: 1, name: '试卷管理', url: '/manage/examManage.html'},
                {id: 2, name: '学生管理', url: '/manage/stuManage.html'}
            ],
            loginUser: {}
        },
        beforeMount() {
            let str = localStorage.getItem("userLogin");
            if(str && str.trim()) {
                try {
                    this.loginUser = JSON.parse(str);
                } catch(e) {
                    toastr.error("您还未登录！");
                    setTimeout(()=>{
                        location.href = baseUrl + "/manage/login.html";
                    }, 500);
                }
            }
        },
        methods: {
            doLogout() {
                $.get(baseUrl + "/back/user/logout", ({msg, success}) => {
                    if(success) {
                        localStorage.removeItem("userLogin");
                        setTimeout(()=>{
                            location.href = baseUrl + "/manage/login.html";
                        }, 500);
                        return;
                    }
                    toastr.warning(msg);
                });
            },
            doTemp() {

            }
        }
    });
</script>
</body>
</html>